<template>
  <div class="count-plug">
    <div class="count-plug-item">
      <div class="icon minus"
           :class="btnDisabled"
           @click="handleClickDecrease">
           <img :src="number <= this.minLimit ? minusImgDis:minusImg" alt="">
      </div>
    </div>
    <div class="count-plug-item">
      <div class="input">
        <input type="number"
               @focus="focusEvent"
               @blur="blurEvent"
               v-model="number" />
      </div>
    </div>
    <div class="count-plug-item">
      <div class="icon"
           @click="handleClickIncrease">
           <img src="https://img.wifenxiao.com/h5-wfx/images/item/shop-car/cart_add.png" alt="">
           <!-- TODO 暂时隐藏svg -->
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
/**
 * @Author: yqe@360shop.cn
 * @Date: 2019-11-29 09:38:45
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-21 13:39:20
 */
export default Vue.extend({
  name: 'index',
  props: {
    param: {
      type: Object,
      default() {
        return {}
      }
    },
    itemId: {
      type: String,
      default: ''
    },
    skuId: {
      type: String,
      default: ''
    },
    value: {
      // type: Number,
      default: 1
    },
    minLimit: {
      // 限制的最小值
      type: Number,
      default: 1
    },
    maxLimit: {
      // 限制的最大值
      // type: Number,
      default: 9999
    },
    disabled: {
      // 是否禁用点击
      type: Boolean,
      default: false
    },
    supplier: {
      type: String | Number,
      default: ''
    },
    plugType: {
      type: String | Number,
      default: 0 // 当为0的时候是默认状态 1 是sku状态
    },
    cartId: {
      type: String | Number,
      default: ''
    },
    // 定制新样式
    dzClass: {
      type: Boolean,
      default: false
    },
    step: {
      // 步进器 默认为 1
      type: Number | String,
      default: 1
    }
  },
  data() {
    return {
      minusImgDis: 'https://img.wifenxiao.com/h5-wfx/images/item/shop-car/cart_reduce_dis.png',
      minusImg: 'https://img.wifenxiao.com/h5-wfx/images/item/shop-car/cart_reduce.png',
      number: '',
      tempNumber: '',
      btnDisabled: ''
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        // if (val > this.maxLimit) {
        //   this.number = this.maxLimit
        //   this.$emit('input', val, this.maxLimit)
        // } else {
          this.number = val
        // }
      }
    },
    number(val) {
      this.$emit('input', val, this.maxLimit)
      this.btnDisabled = val <= this.minLimit ? 'disabled' : ''
    }
  },
  mounted() {
    this.number = this.value
  },
  methods: {
    focusEvent() {
      // if (this.value > this.maxLimit) {
      //   this.number = this.maxLimit
      //   this.$emit('input', this.number, this.maxLimit)
      // } else {
        // this.number = this.value
        this.tempNumber = this.number
      // }
    },
    // ios手机端失去焦点时复原页面
    blurEvent(e) {
      e.preventDefault()
      if (Number(this.maxLimit) == 0 && this.plugType == 1) { // 当数量为0的时候强制变为0
        this.number = 0
        return false
      }
      if (Number(this.number) < Number(this.minLimit)) {
        // this.$Error('该宝贝不能少于了呦~')
        this.$Error(`该宝贝不能少于${this.minLimit}件~`)
        this.number = this.tempNumber
        this.$emit('input', this.number)
      } else if (Number(this.number) > Number(this.maxLimit) && this.maxLimit > 0) {
        this.$Error(`该宝贝不能超过${this.maxLimit}件~`)
        // this.tempNumber = this.maxLimit
        this.number = this.tempNumber
        this.$emit('input', this.number)
      } else {
        // 请求接口
        this.$emit('changeNum', this.number, 'setting', this.itemId, this.skuId, this.cartId, this.supplier)
        const params = [this.number, 'setting', this.itemId, this.skuId, this.cartId, this.supplier] 
        this.$emit('changeShopCarNum', params)
      }
      const param = this.param
      param.number = this.number
      this.$emit('getParam', param)
      window.scroll(0, 0)
    },
    /**
     * 点击数字加
     */
    handleClickIncrease(e) {
      e.preventDefault()
      if (Number(this.maxLimit) == 0 && this.plugType == 1) { // 当数量为0的时候强制变为0
        this.number = 0
        return false
      }
      if (Number(this.number) + + Number(this.step) > this.maxLimit && this.maxLimit > 0) {
        this.$Error(`该宝贝不能超过${this.maxLimit}件~`)
      } else {
        // this.number++
        this.number = Number(this.number) + Number(this.step)
        this.$emit('changeNum', this.number, 'add', this.itemId, this.skuId, this.cartId, this.supplier)
        const params = [this.number, 'add', this.itemId, this.skuId, this.cartId, this.supplier]
        this.$emit('changeShopCarNum', params)
        const param = this.param
        param.number = this.number
        this.$emit('getParam', param)
      }
    },
    /**
     * 点击数字减
     */
    handleClickDecrease(e) {
      e.preventDefault()
      if (Number(this.number) - Number(this.step) < this.minLimit) {
        
      } else {
        this.number = Number(this.number) - Number(this.step)
        this.$emit('changeNum', this.number, 'reduce', this.itemId, this.skuId, this.cartId, this.supplier)
        const params = [this.number, 'reduce', this.itemId, this.skuId, this.cartId, this.supplier]
        this.$emit('changeShopCarNum', params)
        const param = this.param
        param.number = this.number
        this.$emit('getParam', param)
      }
    }
  }
})
</script>

<style  lang="scss">
@import "src/styles/mixin";
.miniprogram-root {
  .count-plug {
    &-item {
      .input {
        display: flex;
        align-items: center;
        input {
          height: initial;
          line-height: initial;
          min-height: initial;
        }
      }
    }
  }
}
.count-plug {
  font-size: 0;
  overflow: hidden;
  &-item {
    font-size: 26px;
    cursor: pointer;
    @include alignTop;
    .icon {
      width: 40px;
      height: 40px;
      img {
        max-width: 100%;
        width: 100%;
      }
    }
    .minus {
      img {
        vertical-align: 6px;
      }
    }
    .input {
      width: 76px;
      height: 40px;
      padding: 0 6px;
      margin: 0 14px;
      background: #f3f3f3;
      input {
        height: 40px;
        line-height: 40px;
        background: transparent;
        border: none;
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>
